<!-- 排班管理王艳明-->
<template>
  <div class="dashboard-container transport-task customer-list-box">
    <el-card class="box-card">
      <!-- form表单 -->
      <el-form
        ref="queryForm"
        :model="queryForm"
        label-width="80px"
        :rules="rules"
      >
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item
              prop="employeeNumber"
              label="员工账号:"
            >
              <el-input
                v-model="queryForm.employeeNumber"
                placeholder="请输入员工账号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              prop="name"
              label="员工姓名:"
            >
              <el-input
                v-model="queryForm.name"
                placeholder="请输入员工姓名"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              prop="workPatternName"
              label="工作模式:"
            >
              <el-select
                v-model="queryForm.workPatternId"
                placeholder="请选择工作模式"
              >
                <el-option
                  v-for="item in workTypeList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              prop="month"
              label="月份:"
            >
              <el-date-picker
                v-model="queryForm.month"
                type="month"
                placeholder="选择日期"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="所属机构:"
              prop="organ"
            >
              <el-input
                v-model="queryForm.txt"
                readonly
                placeholder="请选择所属机构"
                @click.native.stop="toggleTree"
              >
              </el-input>
              <div
                v-show="treeShow"
                class="tree-box"
              >
                <el-tree
                  :data="organList"
                  :props="defaultProps"
                  @node-click="handleNodeClick"
                ></el-tree>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button
              type="warning"
              @click="searchForm"
            >搜索</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 列表展示 -->
    <el-card class="box-card">
      <el-button
        type="warning"
        @click="$router.push('workArrange-setting')"
      >排班设置</el-button>
      <el-button @click="setWorkSchedulings">绑定排班</el-button>
      <template>
        <el-table
          v-loading="loading"
          :data="tableData"
          style="width: 100%"
          @select="select"
        >
          <el-table-column
            type="selection"
            width="55"
          >
          </el-table-column>
          <el-table-column
            prop="employeeNumber"
            label="员工账号"
            width="120"
            fixed
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="员工姓名"
            width="100"
            fixed
          >
          </el-table-column>
          <el-table-column
            prop="phone"
            label="员工电话"
            width="100"
            fixed
          >
          </el-table-column>
          <el-table-column
            prop="userType"
            label="员工角色"
            width="100"
            fixed
          >
          </el-table-column>
          <el-table-column
            prop="workPatternName"
            label="当前工作模式"
            width="100"
            fixed
          >
          </el-table-column>
          <el-table-column
            v-for="(el,i) in tableData.length
              ?tableData[0].workSchedules
              : []"
            :key="i.index"
            :label="(String(i+1))"
          >
            <template slot-scope="{row}">
              <div :class="{work:row.workSchedules[i],rest:!row.workSchedules[i]}">
                {{ row.workSchedules[i]===true?'上':'休' }}
                <!-- {{ row }} -->
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页 -->
      <el-pagination
        align="center"
        :current-page="queryForm.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </el-card>
    <el-dialog
      title="人工调整"
      :visible.sync="visible"
      @open="openDialog"
    >
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
      >
        <el-form-item>
          <el-radio-group
            v-model="radio"
            @change="change"
          >
            <el-radio :label="1">礼拜制</el-radio>
            <el-radio :label="2">连续制</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="活动名称">
          <el-select
            v-model="form.id"
            placeholder="请选择"
          >
            <el-option
              v-for="item in workTypeList2"
              :key="item.value"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-button @click="editEnter">确定</el-button>
        <el-button>取消</el-button>
      </el-form></el-dialog>
  </div>
</template>
<script>
import { workManage, selectWorkHistoryList, peopleSet } from '@/api/transit'
import { agencyList } from '@/api/institutions'
export default {
  data() {
    return {

      // 校验规则
      rules: {
        employeeNumber: [{}]
      },
      tableData: [], // 表格展示的数据
      queryForm: {
        txt: '',
        workPatternId: null,
        agencyId: null,
        employeeNumber: null,
        page: 1,
        pageSize: 10,
        name: null
      },
      loading: false,
      count: 0, // 总条数
      organList: null,
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      treeShow: false,
      workTypeList: [],
      workTypeList2: [],
      // 控制弹出层
      visible: false,
      radio: 2,
      userIdList: [],
      form: {
        workPatternType: '',
        id: ''

      }
    }
  },
  created () {
    this.getList()
    this.querySearchAsync()
    this.selectWorkHistoryList()
  },
  methods: {
    openDialog() {
      if (this.radio === 1) {
        this.workTypeList2 = this.workTypeList.filter(el => {
          return el.workPatternType === 1
        })
      } else if (this.radio === 2) {
        this.workTypeList2 = this.workTypeList.filter(el => {
          return el.workPatternType === 2
        })
      }
    },
    // 单选框change触发事件
    change(value) {
      // value为1和2
      console.log(value)
      this.workTypeList2 = this.workTypeList.filter(el => {
        return el.workPatternType === value
      })
    },
    async editEnter() {
      await peopleSet({
        userIdList: this.userIdList,
        workPatternId: this.form.id,
        workPatternType: this.radio
      })
      this.$message.success('done editing')
      this.visible = false
    },
    select(val, data) {
      this.userIdList.push(data.id)
    },
    // 点击排版设置
    setWorkSchedulings() {
      if (this.userIdList.length === 0) {
        return this.$message.error('请选择人员')
      }
      this.visible = true
    },
    // 点击搜索请求数据
    searchForm() {
      this.dataForm = this.getList(this.queryForm)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    // 分页切换请求数据
    async handleCurrentChange(val) {
      this.queryForm.page = val
      this.getList(this.queryForm)
    },
    // 定义请求数据方法
    async getList(dataForm) {
      this.loading = true
      const { data } = await workManage(dataForm)
      this.tableData = data.items.map(el => {
        if (el.userType === 1) {
          el.userType = '员工'
        } else if (el.userType === 2) {
          el.userType = '快递员'
        } else if (el.userType === 3) {
          el.userType = '司机'
        }
        return el
      })
      this.count = +data.counts
      this.loading = false
    },
    handleNodeClick(data) {
      this.queryForm.txt = data.name
      this.queryForm.agencyId = data.id
      this.treeShow = !this.treeShow
    },
    // 机构input点击切换tree
    toggleTree() {
      this.treeShow = !this.treeShow
    },
    // 定义请求所属机构方法
    async querySearchAsync() {
      const res = await agencyList()
      this.organList = JSON.parse(res.data)
    },
    // 定义请求工作模式方法
    async selectWorkHistoryList() {
      const { data } = await selectWorkHistoryList()
      const arr = []
      for (const key in data) {
        arr.push(...data[key])
      }
      this.workTypeList = arr
    },
    resetForm() {
      this.$refs.queryForm.resetFields()
      this.getList()
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/deep/ th.date{
  .cell{
    padding-left: 17px!important;
  }
}
.work {
  width: 24px;
  height: 24px;
  background: #ffeeeb;
  border: 1px solid #e15536;
  border-radius: 50%;
  text-align: center;
  color: #e15536;
  font-size: 13px;
}
.history-name {
  width: auto !important;
  /deep/ .el-input__inner {
    width: 293px;
  }
}

.workArrange-manage-people-setting {
  /deep/ .el-dialog__body {
    padding: 30px 50px 10px 50px !important;
  }
  /deep/ .el-dialog__footer {
    padding-bottom: 40px;
  }
}
.tree-box {
 position: absolute;
 width: 100%;
 min-height: 50px;
 left: 0;
 top: 45px;
 z-index: 100;
 border: 1px solid #ccc;
 border-radius: 4px;
 padding-right: 5px;
 overflow: hidden;
 background-color: #fff;
 max-height: 200px;
 overflow: auto;
 ::v-deep {
  .el-tree-node__content {
   height: auto;
  }
 }
}
.work-type {
  /deep/ .el-form-item__content {
    margin-left: 40px !important;
  }
  /deep/ .el-radio:first-child {
    margin-right: 80px !important;
  }
  /deep/.el-radio__label {
    font-weight: bold;
    color: #333333;
  }
}

.dialog-footer {
  .el-button {
    width: 89px;
    height: 36px;
    padding: 10px 20px;
  }
}

.rest {
  width: 24px;
  height: 24px;
  background: #eff3f8;
  border: 1px solid #d8dde3;
  border-radius: 50%;
  text-align: center;
  color: #20232a;
  font-size: 13px;
}

.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 40px;
}
.transport-task /deep/ .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}

// 下拉框
/deep/ .el-select {
  width: 100%;
}

/*定义滚动条轨道 内阴影+圆角*/
/deep/ .el-table--scrollable-x .el-table__body-wrapper {
  padding-bottom: 5px;
  margin-bottom: 5px;
  &::-webkit-scrollbar {
    height: 10px;
  }

  /*定义滑块 内阴影+圆角*/
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(144, 147, 153, 0.3);
  }

  &::-webkit-scrollbar-track-piece {
    margin-right: 3px;
    margin-left: 3px;
  }
}
/deep/ .el-card{
  overflow: initial;
}
.box-card{
  margin: 20px;
}
/deep/ .el-dialog{
  width: 566px;
  height: 300px;

}
</style>

